<template>
  <el-form-item :class="getClz()" :label="opt.text" :prop="opt.name" v-if="!opt.hide"  v-bind="opt.itemProps">
    <el-date-picker clearable style="width:100%" unlink-panels
        v-model="data[opt.name]"
        :type="opt.props.type"
        :value-format="opt.format"
        :placeholder="opt.placeholder"
        :picker-options="opt.pickerOptions"
        :range-separator="opt.rangeSeparator"
        :start-placeholder="opt.startPlaceholder"
        :end-placeholder="opt.endPlaceholder"
        v-bind="opt.props"
        @blur="onBlur(data,column)"
        @change="onChange(data,column)"
    >
    </el-date-picker>
  </el-form-item>
</template>

<script>
  import extend from '../extend';
  let Log = ()=>{};

  export default {
    name: "FormDate",
    mixins:[extend],
    data(){
      return {
        opt:{
          name:'',
          text:'',
          className:'',
          itemProps:{},
          hide:false,
          props:{
            type:'date',
            pickerOptions:{}
          },
          placeholder:'',
          rangeSeparator:'至',
          startPlaceholder:'开始日期',
          endPlaceholder:'结束日期',
          format: "yyyy-MM-dd"//"timestamp"
        }
      }
    },
    created(){
      this.initOptions();
      this.onChange = this.column.onChange||Log;
      this.onBlur = this.column.onBlur||Log;
    },
    methods:{
      initOptions(){
        if(!this.column.format){
          this.column.format = (this.column.props||{}).type == 'datetime' ? 'yyyy-MM-dd HH:mm:ss' : "yyyy-MM-dd";
        }
      },
      setValue(val){
        this.data[this.opt.name] = val;
      }
    }
  }
</script>

<style scoped>
</style>
